<!doctype html>

<!--
Chrome plugin to manage Google Bookmarks.
@see https://code.google.com/p/google-bookmarks-plugin

Copyright (c) 2013, Shakil Siraj(shakil.siraj@gmail.com). Licensed MIT.

-->

<html>
  <head>
	<script src="jquery.min.js" type="text/javascript"></script>
	<script src="jquery-ui.js" type="text/javascript"></script>
	
	<script src="jqcloud-1.0.4.min.js" type="text/javascript"></script>
	<script src="organicTabs.js" type="text/javascript"></script>
	<script src="functions.js" type="text/javascript"></script>
	<script src="tree.jquery.js" type="text/javascript"></script>

	<link rel="stylesheet" href="jqtree.css">
	<link rel="stylesheet" href="jqcloud.css">
	<link rel="stylesheet" href="stylesheet.css">
  </head>
  <body id="pluginBody">
        <div id="mainBody">
			<div id="loadingInfo" class="loadingMsg">
				<div id="facebookG">
					<div id="blockG_1" class="facebook_blockG">
					</div>
					<div id="blockG_2" class="facebook_blockG">
					</div>
					<div id="blockG_3" class="facebook_blockG">
					</div>
				</div>
			</div>

			<div id="loadingFailure">
				Unable to download Google Bookmarks!
				<div>
					<button id="reloadBookmarks" class="screenButton">Reload</button>
					<button id="login" class="screenButton">Login to Google</button>
				</div>
			</div>


			<div id="tabs" style="display:none;">
				<ul class="nav">
					<li class="text nav-one"><a id="cloudTab" href="#tagCloud" class="current">Cloud</a></li>
					<li class="text nav-two"><a id="treeTab" href="#tree">Tree</a></li>
					<li class="text nav-three"><a id="listTab" href="#list">List</a></li>
					<li class="text nav-four last"><a id="bookmarkTab" href="#currentTab">Bookmark</a></li>
				</ul>
				<div class="navBar">
				</div>
				<div class="list-wrap">
				
					<ul id="tagCloud">
							<div id="tagCloudCanvasContainer">
								<canvas width="350" height="320" id="tagCloudCanvas"></canvas>
							</div>
							<div id="tags">
							
							</div>
							
					</ul>
					 
					 <ul id="tree" class="hide">
						<li>
							<div id="bookmarksTree">Loading data ...</div>
						</li>
					 </ul>
					 
					 <ul id="list" class="hide">
						<div id="searchListBoxContainer">
							<input type="text" id="searchListBox"></input>
							<button id="searchBookmarkList" class="screenButton">Search</button>
						</div>
						<li class='listClass'>Loading data ...</li>
					 </ul>

					 <ul id="currentTab" class="hide">
				 		<div>
							<div class="block">
  								<label>Title</label>
  								<input class="input" type="text" id="txtTitle"></input>
							</div>

							<div class="block">
  								<label>URL</label>
  								<input class="input" type="text" id="txtURL"></input>
							</div>

							<div class="block">
  								<label>Annotation</label>
  								<textarea id="txtAnnotation" class="input" rows="10" cols="50"></textarea>
							</div>

							<div class="block">
  								<label>Labels</label>
  								<input class="input" type="text" id="txtLabels" spellcheck="false"></input>
							</div>

							<div id="btnBlock">
								<button id="btnAddBookmark" class="screenButton">Add 
								</button>
								<button id="btnEditBookmark" class="screenButton" disabled>Update
								</button>
								<button id="btnDeleteBookmark" class="screenButton" disabled>Delete</button>
							</div>
						</div>
					 </ul>
				</div>
		</div>
  </body>
</html>